<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuimini/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<form id="userForm">
<div class="layui-form layuimini-form" lay-filter="add_ncc">

    <div class="layui-form-item">
        <label class="layui-form-label required">监控类型</label>
        <div  id="typed" name="typed" class="layui-input-block"></div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">任务名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" lay-verify="required" lay-reqtext="任务名称不能为空" placeholder="请输入任务名称" value="" class="layui-input">
        </div>
    </div>


    <div id="monitor_content" >
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">监控频率</label>
        <div class="layui-input-block">
            <select name="frequency" id="frequency">
                <option value="0">5秒钟</option>
                <option value="1">10秒钟</option>
                <option value="2">30秒钟</option>
                <option value="3">1分钟</option>
                <option value="4">3分钟</option>
                <option value="5">5分钟</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">告警组</label>
        <div  id="linkgroup_id" name="linkgroup_id" class="layui-input-block"></div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">告警方式</label>
        <div  id="alert_type" name="alert_type" class="layui-input-block"></div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <input type="text" name="remarks" id="remarks"   value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">执行动作主机</label>
        <div  id="sv_ip" name="sv_ip" class="layui-input-block"></div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">执行自愈项</label>
        <div  id="ac_id" name="ac_id" class="layui-input-block"></div>
    </div>



</div>
</form>

<script src="/static/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/layui/sm_select/xm-select.js"></script>
<script>
    layui.use(['form','laydate'],function () {
        var form = layui.form
        , laydate = layui.laydate;
        form.render();
    });

    var typed = xmSelect.render({
                el: '#typed',
                name: 'typed',
                filterable: true,
                radio: true,
                data: [],
                on: function (data) {
                    //alert(JSON.stringify(data.arr[0].value));
                    //debugger;
                    var value = data.arr[0].value;
                    showfunc(value);
                }
            });


    var xmselect = xmSelect.render({
                el: '#linkgroup_id',
                name: 'linkgroup_id',
                filterable: true,
                radio: true,
                data: []
            });

    var alert_type = xmSelect.render({
                el: '#alert_type',
                name: 'alert_type',
                filterable: true,
                radio: true,
                data: []
            });

    var sv_ip = xmSelect.render({
                el: '#sv_ip',
                name: 'sv_ip',
                filterable: true,
                radio: true,
                data: []
            });

    var ac_id = xmSelect.render({
                el: '#ac_id',
                name: 'ac_id',
                filterable: true,
                radio: true,
                data: []
            });

    var process_ip = xmSelect.render({
                el: '#process_ip',
                name: 'process_ip',
                filterable: true,
                radio: true,
                data: []
            });


    var test = {
        method1: function (data)
        {
            xmselect.update({data:data});
        },
        method2: function (data) {
            alert_type.update({data:data});
        },
        method3: function (data) {
            sv_ip.update({data:data});
        },
        method4: function (data) {
            ac_id.update({data:data});
        },
        method5: function (data) {
            //alert(data.type_list);
            //debugger;
            //window.da = data;
            //type.update({data:da.type_list});
            typed.update({data:data});
        }

    }


    function showfunc(value) {

        //var selectedOption=value.options[value.selectedIndex];
            //alert(selectedOption);
            //alert(value);
            if(value === 0){
                var sHtml = '';
                sHtml += '<div class="layui-form-item">\
                    <label class="layui-form-label required">监控URL</label>\
                    <div class="layui-input-block">\
                        <input type="text" name="url" id="url" lay-verify="required" lay-reqtext="监控地址不能为空" placeholder="请输入监控地址" value="" class="layui-input">\
                    </div>\
                </div>';
                document.getElementById("monitor_content").innerHTML = sHtml;
            }

            if (value === 1){
                var sHtml = '';
                sHtml += '<div class="layui-form-item">\
                        <label class="layui-form-label required">监控地址</label>\
                        <div  id="address" name="address" class="layui-input-block"></div>\
                    </div>\
                    <div class="layui-form-item">\
                    <label class="layui-form-label required">监控端口</label>\
                    <div class="layui-input-block">\
                        <input type="text" name="port" id="port" lay-verify="required" lay-reqtext="监控端口不能为空" placeholder="请输入监控端口" value="" class="layui-input">\
                    </div>\
                </div>';

                document.getElementById("monitor_content").innerHTML = sHtml;
            }


            if (value === 2){
                var sHtml = '';
                sHtml += '<div class="layui-form-item">\
                        <label class="layui-form-label required">进程所在主机</label>\
                        <div class="layui-input-block">\
                            <input type="text" name="process_ip" id="process_ip" lay-verify="required" lay-reqtext="监控地址(IP/域名)不能为空" placeholder="请输入监控地址(IP/域名)" value="" class="layui-input">\
                        </div>\
                    </div>\
                    <div class="layui-form-item">\
                    <label class="layui-form-label required">进程关键字</label>\
                    <div class="layui-input-block">\
                        <input type="text" name="port" id="port" lay-verify="required" lay-reqtext="监控端口不能为空" placeholder="请输入监控端口" value="" class="layui-input">\
                    </div>\
                </div>';
                document.getElementById("monitor_content").innerHTML = sHtml;
                //process_ip.update({data:da.newserver_list});
            }
    }
</script>
</body>
</html>